<template>
    <div id="credit_details">
        <div class="credit-tabs list_switch">
            <div class="credit_card" >
                <img :src="item.logoUrl" class="header_img" />
                <slot name="creditBtn"></slot>  
            </div>
            <div class="circle"></div>
           <tab :line-width=2 active-color="rgb(47, 120, 236)" :scroll-threshold="3">
              <tab-item class="vux-center"  v-for="(item, index) in list2" :selected="index == 0" @on-item-click="message(index)" :key="index">{{item}}</tab-item>
          </tab>
          <div class="tab-swiper vux-center" v-show="num === 0">
            <p><span></span><span>{{item.attr1}}:</span></p>
          </div>
           <div class="tab-swiper vux-center" v-show="num === 1">
            <p><span></span><span>{{item.attr2}}:</span></p>
          </div>
          <div class="tab-swiper vux-center" v-show="num === 2">
            <p><span></span><span>{{item.attr3}}:</span></p>
          </div>
        </div>
  </div>
</template>
<script>
import { Tab, TabItem, Swiper, SwiperItem} from 'vux'
import api from "../api"
import utils from '../utils'
export default {
  props: ['item'],
  data(){
    return{
      tabIndex: 0,
      list2: ['关键信息', '积分信息', '分期付款'],
      num: 0,
      demo2: '关键信息'
    }
  },
  components:{
    Tab,
    TabItem,
    Swiper,
    SwiperItem
  },
  methods: {
    message (index) {
      this.num = index
    }
  }
}
</script>



